<template>
  <el-dialog v-model="dialogUserVisible" title='用户信息' width="500px" center draggable>
    <el-container>
      <el-aside width="200px">
        <el-avatar shape="square" :size="120" :src="userData.image_url" />
      </el-aside>
      <el-main>
        <div>账号：{{ userData.account }}</div>
        <div>姓名：{{ userData.name }}</div>
        <div>性别：{{ userData.sex }}</div>
        <div>部门：{{ userData.department }}</div>
        <div>邮箱：{{ userData.email }}</div>
        <div>状态：
          <span v-if="userData.status === 0">正常</span>
          <span v-else>冻结</span>
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <span @click="goEdit(userData.id)">编辑</span>
      <span @click="goPromote(userData.id)">赋权</span>
      <span @click="goDelete(userData.id, userData.account)">删除用户</span>
    </el-footer>
  </el-dialog>
  <promote ref="promoteRef" :closeDialog="closeDialog"></promote>
  <edituser ref="editUserRef" :departmentList="departmentList" :closeDialog="closeDialog"></edituser>
  <delete_user ref="deleteUserRef" :closeDialog="closeDialog"></delete_user>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import promote from './promote.vue'
import edituser from './edit_user.vue'
import delete_user from './delete_user.vue'
import { getCompanyDepartment } from '../../../api/setting'

const dialogUserVisible = ref(false)

const userData = ref()
const title = '用户'

const openDialog = (row) => {
  dialogUserVisible.value = true
  userData.value = row
}

const closeDialog = () => {
  dialogUserVisible.value = false
}

defineExpose({
  openDialog
})

// 去赋权
const promoteRef = ref()
const goPromote = (id) => {
  promoteRef.value.open(id)
}

// 去编辑
const editUserRef = ref()
const goEdit = (id) => {
  editUserRef.value.openDialog(userData.value.account, id, title)
}


// 部获取门列表 传给编辑组件
const departmentList = ref()

const getDepartmentList = async () => {
  const res = await getCompanyDepartment()
  departmentList.value = Array.from(JSON.parse(res.data.data))
}
getDepartmentList()


// 去删除
const deleteUserRef = ref()
const goDelete = (id, account) => {
  deleteUserRef.value.openDialog(id, account)
}
</script>

<style lang="scss" scoped>
.el-main>div {
  margin-bottom: 8px;
}

.el-main {
  --el-main-padding: 0px;
}

.el-footer {
  display: flex;
  justify-content: flex-end;
  --el-footer-height: 8px;

  span {
    margin-left: 8px;
    color: #409eff;
    cursor: pointer;
  }
}
</style>